import { ReactNode } from 'react'
import { motion } from 'framer-motion'

interface CardProps {
  children: ReactNode
  className?: string
  onClick?: () => void
  interactive?: boolean
}

function Card({ children, className = '', onClick, interactive = false }: CardProps) {
  const baseClasses = 'rounded-apple bg-white dark:bg-secondary-800 shadow-apple dark:shadow-apple-dark overflow-hidden'
  const interactiveClasses = interactive 
    ? 'hover:shadow-apple-hover dark:hover:shadow-apple-dark-hover transition-all duration-300 ease-apple cursor-pointer' 
    : ''
  
  const classes = `${baseClasses} ${interactiveClasses} ${className}`
  
  const cardAnimations = {
    hover: interactive ? { 
      y: -5,
      transition: { duration: 0.3 }
    } : {},
    tap: interactive ? { scale: 0.98 } : {}
  }
  
  return (
    <motion.div 
      className={classes}
      onClick={onClick}
      whileHover="hover"
      whileTap="tap"
      variants={cardAnimations}
    >
      {children}
    </motion.div>
  )
}

export default Card